// dplayer.vue
 
<template>
	<div>
		<div id="dplayer" style="width:100%;height:439px;bottom: 0;right: 0;"></div>
	</div>
</template>
 
<script>
import DPlayer from 'dplayer'
import { savePersonStudyInfo,personStudyInfo,getCourseResource } from '@/api/course'
export default {
	name: 'dplayer',
	dplayer:null,
	props: {
		dplayerData: {
			type:Object,
			default:null,
		},
		couserObj:{
			type:Object,
			default:null,
		},
	},
	data() {
		return {
			currentTime:0,
			playUrl:"",
			finished:0,
		}
	},
	mounted() {
		var id=this.$route.query.id
		getCourseResource(id).then(res=>{
			this.playUrl=res.resourceFile
			this.dplayer = new DPlayer({
				container: document.getElementById('dplayer'),
				theme: '#b7daff', // 风格颜色，例如播放条，音量条的颜色
				loop: false, // 是否自动循环
				lang: 'zh-cn', // 语言，'en', 'zh-cn', 'zh-tw'
				hotkey: true, // 是否支持热键，调节音量，播放，暂停等
				preload: 'auto', // 自动预加载
				autoplay:false,//自动播放
				//logo:require('../../../assets/image/logo.png'),
				screenshot: true,
				volume: 0.7,
				mutex: true,
				video: {
					url: this.playUrl, // 播放视频的路径
					defaultQuality: 0, // 默认是HD
					pic: '', // 视频封面图片,
					type: 'auto',
				},
			});
			//暂停播放，记录播放时间
			this.dplayer.on('pause', () => {
			    this.getCurrentTime()
			});
			
			//播放结束，重新计算学习进度
			// this.dplayer.on('ended', () => {
			//     this.playAutoEnd()
			// });
			
			// this.dplayer.on('timeupdate', () => {
			//     this.notSpeek()
			// });
			
			//开始播放，通过定时器记录播放时间
			this.dplayer.on('play', () => {
				//启动定时器，记录播放时间
			    //this.getCurrentTime()
			});
		}) 
	},
	
	created() {
		this.$nextTick(() => {
		   //this.courseResourceData()
		})
	},
	watch:{
		'$route.query.id'(val,old) {
			if(val){
				this.courseResourceData(val)
			}
		}
	},
	methods: {
		playAutoEnd(){//自动播放结束
		    this.$parent.$refs.coursePlayRef.getPersonCourseStudyPercent()
		},
		courseResourceData(val){
			getCourseResource(val).then(res=>{
				// this.courseResource=res.resourceFile
				// var obj=res.resourceFile
				// var array=eval('(' + res.resourceFile + ')'); 
				// if(Object.prototype.toString.call(array)==='[object Array]'){
				// 	this.playUrl=array[0].url;
				// }
				this.playUrl=res.resourceFile
				this.dplayer.switchVideo({
					url: this.playUrl,
				})
			})  
		},
        // 切换视频源事件
		switchVideo() {
			this.dplayer.switchVideo({
				url: this.playUrl,
			})
		},
		saveStudyTime(){
			var resourceId=this.$route.query.id;
			if(resourceId==''||resourceId==null || resourceId==undefined){
				resourceId=sessionStorage.getItem("resourceId");
				if(resourceId==''||resourceId==null || resourceId==undefined){
					resourceId="";
				}
			}
			var taskId=this.$route.query.taskId;
			if(taskId==''||taskId==null || taskId==undefined){
				taskId=sessionStorage.getItem("taskId");
				if(taskId==''||taskId==null || taskId==undefined){
					taskId="";
				}
			}
			var form={
				id:"",
				courseId:this.couserObj.id,
				courseName:this.couserObj.courseName,
				themeImage:this.couserObj.themeImage,
				resourceDuration:this.currentTime,
				isFinish:this.finished,
				courseResourceId:resourceId,
				taskId:taskId
			}
			savePersonStudyInfo(form).then(res=>{

			}).catch(res=>{
				this.$message({
					type: 'error',
					message: '操作失败'
				}); 
			})
		},
		getCurrentTime(){
			this.currentTime=Math.floor(this.dplayer.video.currentTime)
			var durationTime=Math.floor(this.dplayer.video.duration)
			if(durationTime-this.currentTime<=1){//误差在1秒以内，都算完成学习
				this.finished=1
			}
			this.saveStudyTime()
		},
		seekTime(){//播放至指定时间
			//设定到指定时间、
			this.dplayer.seek(10)
		},
		continuePlay(){//继续播放
			var params={
				courseId:this.couserObj.id
			}
			personStudyInfo(params).then(res=>{
				if(res!="" && res!=null){
					if(res.resourceDuration!=null){
						this.dplayer.seek(res.resourceDuration)
					}
				}
				this.dplayer.play()
			})
		},
		startPlay(){//继续播放
			this.dplayer.play()
		}
	},
}
</script>
 
<style lang="scss">
//禁止拖动快进条
.dplayer-controller .dplayer-bar-wrap{
	pointer-events: none !important;
  }
</style>